<script lang="ts" setup>

import {useUserStore} from "../../store/UserStore.ts";
import type {UserDetail} from "../../network/types/User.ts";
import {onMounted, ref, watch} from "vue";

interface Props {
  userId: number
}

const props = defineProps<Props>();
const userStore = useUserStore();
const ip = ref("")

const request = async (userId: number) => {
  const res = await userStore.detailHtml(userId, undefined) as UserDetail
  ip.value = res.ipLocation
}

onMounted(() => request(props.userId))

watch(props, (p) => request(p.userId))

</script>

<template>
  <el-tag effect="dark" type="danger">{{ ip }}</el-tag>
</template>

<style scoped>

</style>